<template>
  <div class="home">
    <div id="nav" :style="{ opacity: opacity }">导航</div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <p><button @click="count++">增加</button></p>
    <!-- <p>{{count}}</p> -->
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      count: 0,
      opacity: 0,
    };
  },
  methods: {
    handleScroll() {
      var top = window.scrollY;
      var opacity = top / 300;
      if (opacity > 1) {
        opacity = 1;
      }
      this.opacity = opacity;
    },
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped>
#nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 30px;
  background-color: #ff2d51;
  line-height: 30px;
}
.home {
  height: 3000px;
}
</style>
